<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
		<script src='./JS/OrbitControls.js'></script>
		<script src='./JS/OBJLoader.js'></script>
		<script src='./JS/MTLLoader.js'></script>
	</head>
	<body>
	</body>
	<script>
		// 创建场景对象Scene
		var scene = new THREE.Scene();
		
		// /**
		//  * 创建网格模型
		//  */
		// // 创建一个立方体几何对象
		// var geometry01 = new THREE.BoxGeometry(20, 20, 20);
		// // 材质对象Material,  实现漫反射进行渲染
		// var material01 = new THREE.MeshLambertMaterial({
		// 	color: 0x0000ff
		// });
		// // 网格模型对象Mesh
		// var mesh = new THREE.Mesh(geometry01, material01);
		// // 网格模型添加到场景中
		// scene.add(mesh);
		
		
		
		
		
		
		// 辅助三维坐标系AxisHelper
		var axisHelper = new THREE.AxisHelper(250);
		scene.add(axisHelper);
		
		/**
		 * 光源设置
		 */
		//点光源
		var point = new THREE.PointLight(0xffffff);
		point.position.set(0, 0, 0); //点光源位置
		// 通过add方法插入场景中，不插入的话，渲染的时候不会获取光源的信息进行光照计算
		scene.add(point); //点光源添加到场景中
		
		// 点光源2  位置和point关于原点对称
		var point2 = new THREE.PointLight(0xffffff);
		point2.position.set(-400, -200, -300); //点光源位置
		scene.add(point2); //点光源添加到场景中
		
		
		//环境光		境光颜色与网格模型的颜色进行RGB进行乘法运算
		var ambient = new THREE.AmbientLight(0xffffff);
		var ambient = new THREE.AmbientLight(0x444444);
		scene.add(ambient);
		
		// console.log(scene.children)
		
		
		
		/**
		 * 相机设置
		 */
		var width = window.innerWidth; //窗口宽度
		var height = window.innerHeight; //窗口高度
		var k = width / height; //窗口宽高比
		var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
		//创建相机对象
		var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
		camera.position.set(200, 300, 200); //设置相机位置
		camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
		/**
		 * 创建渲染器对象
		 */
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize(width, height); //设置渲染区域尺寸
		renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
		document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
		//执行渲染操作   指定场景、相机作为参数
		// renderer.render(scene, camera);
		
		let render = () => {
			renderer.render(scene, camera); //执行渲染操作
		}
		render();
		
		var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
		controls.addEventListener('change', render); //监听鼠标、键盘事件
		
		
		// var container, stats;
		// var camera, scene, renderer;
		// container = document.createElement( 'div' );
		// // document.body.appendChild( container );

		// scene = new THREE.Scene();
		// var ambient = new THREE.AmbientLight(0x444444);
		// scene.add(ambient);
		
		// var directionalLight = new THREE.DirectionalLight( 0xffeedd );
		// directionalLight.position.set( 0, 0, 1 ).normalize();
		// scene.add( directionalLight );
		
		
		// // 圆柱网格模型
		// var geometry4 = new THREE.CylinderGeometry(50, 50, 100, 25);
		
		// // 添加高光效果
		// var sphereMaterial = new THREE.MeshPhongMaterial({
		// 	color: 0x0000ff,
		// 	specular: 0x4488ee,		//高光颜色
		// 	shininess: 8			// 光照强度的系数
		// });
		// var mesh4 = new THREE.Mesh(geometry4, sphereMaterial);
		// mesh4.position.set(250, 100, 0);
		// scene.add(mesh4); //
		
		
		// camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
		// camera.position.z = 1.5;                //̹��40
		// // camera.aspect = window.innerWidth / window.innerHeight;
		// // camera.updateProjectionMatrix();
		// // camera.lookAt( scene.position );

		// /**A
		//  * OBJ和材质文件mtl加载
		//  */
		
		
		
		// renderer = new THREE.WebGLRenderer();
		// renderer.setPixelRatio( window.devicePixelRatio );
		// renderer.setSize( window.innerWidth, window.innerHeight );
		// container.appendChild( renderer.domElement );
		// renderer.render( scene, camera );
		
		var OBJLoader = new THREE.OBJLoader(); //obj加载器
		var MTLLoader = new THREE.MTLLoader(); //材质文件加载器
		MTLLoader.load('https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/mesh.mtl', function(materials) {
			// OBJLoader.setMaterials(materials);
			// console.log(materials);
			OBJLoader.load('https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/mesh.obj', function(obj) {
				console.log(obj)
				obj.scale.set(4, 4, 4); //放大obj组对象
				// obj.children[0].material.color.set(0xff0000);
				scene.add(obj); //返回的组对象插入场景中
				renderer.render(scene, camera);
			})
		})
	</script>
</html>
